<template>
  <view class="crop-avatar-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="nav-back" @tap="goBack">
        <text class="iconfont back-icon">&#xe697;</text>
      </view>
      <text class="page-title">裁剪头像</text>
      <view class="nav-right" @tap="confirmCrop">
        <text class="confirm-text">完成</text>
      </view>
    </view>
    
    <!-- 裁剪区域 -->
    <view class="crop-container">
      <!-- 这里是头像预览区域，实际项目中可能需要接入专门的图片裁剪组件 -->
      <view class="image-container">
        <image class="avatar-image" :src="avatarPath" mode="aspectFit"></image>
        
        <!-- 模拟裁剪框 -->
        <view class="crop-frame"></view>
      </view>
      
      <!-- 操作提示 -->
      <view class="crop-tips">
        <text class="tips-text">拖动、缩放照片以裁剪合适的头像</text>
      </view>
    </view>
    
    <!-- 底部操作区 -->
    <view class="bottom-actions">
      <view class="action-item" @tap="rotateImage">
        <text class="action-icon iconfont">&#xe65c;</text>
        <text class="action-text">旋转</text>
      </view>
      
      <view class="action-item" @tap="resetImage">
        <text class="action-icon iconfont">&#xe600;</text>
        <text class="action-text">重置</text>
      </view>
      
      <view class="action-item" @tap="chooseNewImage">
        <text class="action-icon iconfont">&#xe67c;</text>
        <text class="action-text">重新选择</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 获取页面参数
const avatarPath = ref('');

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage && currentPage.options && currentPage.options.avatar) {
    avatarPath.value = decodeURIComponent(currentPage.options.avatar);
  }
});

// 旋转图片
const rotateImage = () => {
  // 实际项目中，这里需要调用图片处理API进行旋转
  uni.showToast({
    title: '旋转功能已模拟',
    icon: 'none'
  });
};

// 重置图片
const resetImage = () => {
  // 实际项目中，这里需要重置图片的缩放、位置
  uni.showToast({
    title: '已重置图片',
    icon: 'none'
  });
};

// 重新选择图片
const chooseNewImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      avatarPath.value = res.tempFilePaths[0];
    }
  });
};

// 确认裁剪
const confirmCrop = () => {
  // 实际项目中，这里需要进行实际的裁剪处理
  // 然后将裁剪后的图片传回编辑页面
  
  // 模拟裁剪过程
  uni.showLoading({
    title: '处理中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    // 这里简单地将原图返回
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];
    
    // 判断上一个页面是否是编辑资料页
    if (prevPage && prevPage.route.includes('profile/edit')) {
      // 可以通过这种方式设置上一页的数据
      // prevPage.$vm.userInfo.avatar = avatarPath.value;
    }
    
    // 回到上一页
    uni.navigateBack({
      success: () => {
        // 通过事件通信将裁剪后的头像传给上一页
        uni.$emit('avatar-cropped', {
          avatar: avatarPath.value
        });
      }
    });
  }, 1000);
};

// 返回
const goBack = () => {
  uni.showModal({
    title: '提示',
    content: '确定放弃当前编辑？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateBack();
      }
    }
  });
};
</script>

<style lang="scss">
page {
  background-color: #000;
  min-height: 100%;
}

.crop-avatar-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
  .header {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 15px;
    
    .nav-back {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .back-icon {
        font-size: 20px;
        color: #fff;
      }
    }
    
    .page-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }
    
    .nav-right {
      .confirm-text {
        font-size: 16px;
        color: #6FB3B8;
      }
    }
  }
  
  .crop-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    
    .image-container {
      position: relative;
      width: 300px;
      height: 300px;
      
      .avatar-image {
        width: 100%;
        height: 100%;
      }
      
      .crop-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 2px solid #6FB3B8;
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.5);
        pointer-events: none;
      }
    }
    
    .crop-tips {
      margin-top: 20px;
      
      .tips-text {
        font-size: 14px;
        color: #999;
      }
    }
  }
  
  .bottom-actions {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background-color: #1a1a1a;
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .action-icon {
        font-size: 24px;
        color: #fff;
        margin-bottom: 5px;
      }
      
      .action-text {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style> 